<template>
  <view :class="[`${prefixCls}-activity-card-container`]">
    <view class="card-top" v-if="cardInfo.title">{{ cardInfo.title }}</view>
    <view class="card-description" v-if="cardInfo.description">{{ cardInfo.description }}</view>
    <view class="card-content">
      <slot />
    </view>
  </view>
</template>

<script>
export default {
  name: 'activityCard',
  components: {},
  mixins: [],
  props: {
    cardInfo: {
      type: Object,
      default: () => ({
        title: '',
        description: '',
      }),
    },
  },
  data() {
    return {}
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {},
  created() {},
  mounted() {},
  destroyed() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.#{prefixCls('activity-card-container')} {
  position: relative;
  margin-bottom: 60rpx;
  padding: 60rpx 24rpx 24rpx;
  background: #fff;
  border-radius: 24rpx;
  .card-top {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    width: max-content;
    height: 60rpx;
    padding: 0 55rpx;
    background: #febf16;
    border-radius: 30rpx;
    text-align: center;
    line-height: 60rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2rpx 4rpx #ff8400;
  }
  .card-top::before,
  .card-top::after {
    content: '';
    position: absolute;
    left: 20rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 20rpx;
    height: 20rpx;
    background: #{cdn('/customer/static/images/activity/star@2x.png')} no-repeat center / contain;
    z-index: -1;
  }
  .card-top::after {
    left: auto;
    right: 20rpx;
  }
  .card-description {
    margin-bottom: 12rpx;
    color: #666;
    font-size: 24rpx;
    text-indent: 48rpx;
  }
}
</style>
